<template>
	<view>
		<u-navbar :title="$t('编辑个人资料')" background="{ background: '#fff' }" title-color="#000" back-icon-color="#000"></u-navbar>
		<view class="box">
				<u-cell-item :title="$t('头像')" :arrow="true" @click="upImg"  :border-bottom="false"  bg-color='#fff' :title-style="{color:'#333'}" >
					<image slot="right-icon" class="head" :src="headImg" mode=""></image>
				</u-cell-item>
		</view>

		<view class="box" >
				<u-cell-item :arrow="false" :title="$t('ID')" :value="userInfo.id" bg-color='#fff'  :value-style="{color:'#333'}" :border-bottom="false" :title-style="{color:'#333'}"></u-cell-item>
				<u-cell-item :arrow="false" :title="$t('手机号码')" :value="userInfo.mobile" bg-color='#fff' :value-style="{color:'#333'}"  :border-bottom="false"   :title-style="{color:'#333'}"></u-cell-item>
		</view>
		<view class="box">
				<u-cell-item  :title="$t('昵称')"   :value="userInfo.nickname"  :border-bottom="false"  @click="goEditPage()" bg-color='#fff'  :value-style="{color:'#333'}"	 :title-style="{color:'#333'}"></u-cell-item>
		</view>

		<u-action-sheet :list="genserlist" :safe-area-inset-bottom="true" @click="editgender" v-model="gendershow"></u-action-sheet>
		<u-picker v-model="timeshow" mode="time" confirm-color="#2AC2B3" :confirm-text="$t('保存')" @confirm="confirmtime"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				genserlist: [{
					text: '男',
				}, {
					text: '女'
				}],
				gendershow:false,
				timeshow:false,
				gender:'未设置',
				time:'未设置',
				headImg:'',
				userInfo:'',
			}
		},
		onShow() {
			if (uni.getStorageSync("user")) {
				this.getUser()
			}
		},
		onUnload() {
			uni.$emit('updataUser')
		},
		methods: {
			goEditPage(){
				uni.navigateTo({
					url: '/pagesB/pages/my/editInfo?state=1'
				});
			},
			getUser(){
				this.userInfo = uni.getStorageSync('user')
				this.headImg = this.userInfo.image
				// this.gender = this.userInfo.gender == 0 ? '女':'男'
				// this.time = this.userInfo.birthday || "未设置"
				console.log(this.userInfo);
			},
			// 修改性别
			editgender(val){
				this.gender = this.genserlist[val].text
				var gen = this.gender == "女"?'0':'1'
				this.$http({
					url: "api/member/changeInfo",
					data:{
						gender:gen
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.$tip.tip('修改成功')
					}else{
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			confirmtime(val){
				this.time = val.year + '-' + val.month + '-' + val.day
				this.$http({
					url: "api/user/change_info",
					data:{
						birthday:this.time
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.$tip.tip('修改成功')
					}else{
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			},
			// 上传头像
			upImg() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.showLoading({
							title: '图片上传中'
						});
						this.uploadImage(res.tempFilePaths)
					}

				})
			},
			uploadImage(tempFilePaths) {
				console.log(tempFilePaths);
				let _this = this;
				uni.uploadFile({
					url: this.$baseUrl.baseUrl + 'api/upload/upload', //接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					formData:{
						uid:this.userInfo.id
					},
					success: (res) => {
						let data = JSON.parse(res.data);
						if(data.code==1){
							this.headImg = data.file
							uni.hideLoading();
							this.upData(data.file)
						}else{
							this.$tip.tip(data.msg)
						}
					}
				});
			},
			upData(url){
				this.$http({
					url: "api/member/change_info",
					data:{
						image:url
					}
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.$tip.tip('修改成功')
						uni.setStorageSync('user', res.data.data)
						uni.$emit('updataUser');
					}else{
						this.$tip.tip(res.data.msg)
					}
				}).catch(err => {});
			}
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}
	.box {
		background-color: #0D0D0D;
		margin: 20rpx auto;
		border-radius: 16rpx;
	}

	.head {
		width: 75rpx;
		height: 75rpx;
		border-radius: 50%;
	}
</style>
